<!-- 用户列表：Vuex + Axios + 分页 -->
<template>
  <div>
    <h2>用户列表</h2>
    <el-table :data="items" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="email" label="邮箱" />
    </el-table>
    <div style="margin-top:12px; text-align:right;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="onPage"
      />
    </div>
  </div>
  
</template>

<script>
export default {
  name: 'UsersPage',
  computed: {
    items() { return this.$store.state.users.items },
    total() { return this.$store.state.users.total },
    page() { return this.$store.state.users.page },
    pageSize() { return this.$store.state.users.pageSize }
  },
  mounted() { this.$store.dispatch('users/load') },
  methods: {
    onPage(p) { this.$store.commit('users/setPage', p); this.$store.dispatch('users/load') }
  }
}
</script>
